<template>
	<view class="container">
		<view v-for="(item,index) in itemsList" :key="item.id" class="item-cls">
			<uni-tooltip :content="item.name">
				<view class="name-cls ellipsis">
					<view style="color: green;">【选项{{item.voteOption}}】</view>
					&nbsp;
					<view> {{item.name}}</view>
				</view>
			</uni-tooltip>
			<view class="number-cls">{{item.number}}票</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		listDetailItems
	} from '@/api/vote.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const itemsList = ref([])

	const initData = async (voteId) => {
		const res = await listDetailItems(voteId)
		itemsList.value = res.list
	}
	onLoad(option => {
		initData(option.id)
	})
</script>

<style lang="less" scoped>
	.item-cls {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 10px;
		width: 100%;
		box-sizing: border-box;

		.name-cls {
			width: 100%;
			display: flex;
		}

		/deep/ .uni-tooltip {
			width: calc(100% - 150rpx);
		}

		.number-cls {
			width: 150rpx;
			text-align: right;
		}
	}
</style>